import React from 'react';
import { Form, Input, Button, message } from 'antd';
const FormItem = Form.Item;
import BreadCrumb from '@/view/comps/breadcrub/breadcrub';

const FORMINPUT = {
	labelCol: { span: 4 },
	wrapperCol: { span: 8 }
};
const FORMBUTTONN = {
	labelCol: { span: 4 },
	wrapperCol: { span: 8, offset: 4 }
};

class AddUser extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			username: '',
			password: '',
			role: '',
		};
	}

	createUser = () => {
		const {
			username,
			password,
			role
		} = this.state;
		const reqParam = {
			username,
			password,
			role
		};
		AJAX({
			method: 'post',
			url: '/createUser',
			data: reqParam
		}).then(res => {
			if (res.errNo === 0) {
				message.success('创建成功');
			}
		}, err => {
			console.log(err);
			message.error(err.msg);
		});
	}

	render() {
		const {
			username,
			password,
			role
		} = this.state;
		return (
			<div>
				<BreadCrumb bread={[{title: 'Dashboard', link: '/'}, {title: '用户列表', link: '/app/user'}, {title: '新增用户'}]}/>
				<div className="page-container">
					<div className="form-control">
						<Form>
							<FormItem {...FORMINPUT} label="用户名">
								<Input
									value={username} 
									onChange={e => this.setState({username: e.target.value})}
									maxLength="9"
									placeholder="请输入用户名" />
							</FormItem>

							<FormItem {...FORMINPUT} label="密码">
								<Input 
									value={password}
									ref={ref => this.pwdRef = ref}
									onChange={e => this.setState({password: e.target.value})}
									placeholder="请输入角色值" />
							</FormItem>
							<FormItem {...FORMINPUT} label="角色值">
								<Input 
									value={role}
									ref={ref => this.roleRef = ref}
									onChange={e => {
										const value = e.target.value;
										const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
										if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
											this.setState({role: e.target.value});
										}
									}}
									placeholder="请输入角色值" />
							</FormItem>

							<FormItem {...FORMBUTTONN}>
								<Button type="primary" onClick={this.createUser}>创建</Button>
							</FormItem>
						</Form>
					</div>
				</div>
			</div>
		);
	}

}
export default AddUser;


